
{extend name="public:common_edit"/}
{block name="css"}
<link rel="stylesheet" type="text/css" href="/public/plugs/jQuery-Tags-Input/src/jquery.tagsinput.css" />

<style>
    .form-control {
        max-width: 350px;
    }

    .tb-name {
        width: 238px;
    }
    .error{
        color: red;
        margin-top: 10px;
        display: none;
    }
    .select{
        margin-bottom: 10px;
    }
    .doctor{
        display: none;
    }
</style>
{/block}
{block name="main"}
<section class="content">
    <div class="container-fluid">
        <div class="pull-right">
            <a href="javascript:history.go(-1)" data-toggle="tooltip" title="" class="btn btn-default"
               data-original-title="返回"><i class="fa fa-reply"></i></a>
            <a href="javascript:void(0);" class="btn btn-default"
               data-url="javascript:;"
               onclick="get_help(this)"><i class="fa fa-question-circle"></i> 帮助</a>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-list"></i> {$title}</h3>
            </div>
            <div class="panel-body">
                <!--表单数据-->
                <form action="" method="post" class="form-horizontal"
                      id="category_form">

                    <!--通用信息-->
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab_tongyong">
                            <table class="table table-bordered">
                                <tbody>
                                <tr>
                                    <td width="20%">缩略图:</td>
                                    <td>{:uploadHtml('img',$data.img,'single_img')}</td>
                                </tr>
                                <tr>
                                    <td>技能名:</td>
                                    <td><input placeholder="技能名" class="form-control" name="skill_name" type="text" value="{$data.skill_name}"></td>
                                </tr>
                                <tr>
                                    <td>排序:</td>
                                    <td><input placeholder="排序" class="form-control" name="sort" type="text" value="{$data.sort}"></td>
                                </tr>
                                <tr>
                                    <td>开启闪电邀约:</td>
                                    <td>
                                        <select class="form-control" name="is_fast">
                                            <option id="is_fast1" value="1">开启</option>
                                            <option id="is_fast0" value="0">关闭</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>类型:</td>
                                    <td>
                                        <select class="form-control" name="type">
                                            <option id="type1" value="1">娱乐</option>
                                            <option id="type2" value="2">游戏</option>
                                        </select>
                                    </td>
                                </tr>

                                <tr>
                                    <td>状态:</td>
                                    <td>
                                        <select class="form-control" name="status">
                                            <option id="status1" value="1">开放申请</option>
                                            <option id="status0" value="0">禁止申请</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>技能说明:</td>
                                    <td>
                                        <input placeholder="技能说明" class="form-control" name="explain" type="text" value="{$data.explain}">
                                    </td>
                                </tr>

                                <tr>
                                    <td>邀约形式:(例:在线连麦)</td>
                                    <td>
                                        <div id="form">

                                            {:form_id_html($data['form_id'])}

                                            <!--<div style="margin-top: 15px;">-->
                                                <!--<input type="hidden" name="form_id[]" value="">-->
                                                <!--<input style="float: left" placeholder="邀约形式" class="form-control" name="form_name[]" type="text" value="">-->
                                                <!--<input onclick="delStr()" style="margin-left: 5px" type="button" class="btn" value="删除">-->
                                            <!--</div>-->
                                            <!--<div style="clear: both"></div>-->


                                        </div>

                                        <div style="clear: both"></div>
                                        <div style="margin-top: 15px">
                                            <input type="button" class="add btn btn-primary" value="新增形式" name="" id="">
                                        </div>

                                    </td>
                                </tr>



                                <tr>
                                    <td>技能标签:(例:狙击高手)</td>
                                    <td>
                                        <div id="tag">

                                            {:tag_id_html($data['tag'])}

                                        </div>

                                        <div style="clear: both"></div>
                                        <div style="margin-top: 15px">
                                            <input type="button" class="tag btn btn-primary" value="新增标签" name="" >
                                        </div>

                                    </td>
                                </tr>


                                <tr>
                                    <td>邀约规格:(例:每半小时)</td>
                                    <td>
                                        <input placeholder="邀约规格" class="form-control" name="spec" type="text" value="{$data.spec}">
                                    </td>
                                </tr>
                                <tr>
                                    <td>技能资质要求:</td>
                                    <td>
                                        <textarea name="request"  class="form-control" cols="30" rows="10">{$data.request}</textarea>
                                    </td>
                                </tr>
                                <tr>
                                    <td>技能资质等级:(按回车确认输入)</td>
                                    <td>
                                        <input type="text" class="tags" name="grade" value="{$data.grade}">
                                        <!--<textarea name="grade"  class="form-control" cols="30" rows="10">{$data.grade}</textarea>-->
                                    </td>
                                </tr>


                                <tr>
                                    <td>可接收礼物:</td>
                                    <td>
                                        {:checkBox('gift_id',$gift,$data.gift_id,gift_name)}
                                    </td>
                                </tr>


                                <tr>
                                    <td>申请示例头像:</td>
                                    <td>{:uploadHtml('header_exp',$data.header_exp,'single_img')}</td>
                                </tr>

                                <tr>
                                    <td>技能截图示例:</td>
                                    <td>{:uploadHtml('skill_img',$data.skill_img,'single_img')}</td>
                                </tr>
                                <tr>
                                    <td>申请示例视频(可不上传):</td>
                                    <td >
                                        <div style="position: relative;max-width: 300px">
                                            <video autoplay style="max-width: 300px !important;" class="play_url" controls="controls" muted  src="{$data.video}">
                                                对不起；您的浏览器不支持HTML5视频在WebM和VP8 / VP9或MP4
                                            </video>
                                            <a style="position: absolute;top: 5%;right: 2%;" class="del" data-url="{$data.video}">删除视频</a>
                                        </div>
                                        <input  class="form-control" name="video" type="hidden" value="{$data.video}">
                                    </td>
                                </tr>
                                <tr>
                                    <td>视频上传:</td>
                                    <td><input id="file" name="file" class="file-container" style="float: left"  type="file" value="文件上传"><span class="btn btn-primary qiniu">点击上传视频</span><span style="color: red;">ps:上传视频前请先删除原视频</span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="pull-right">
                        <label class="control-label col-sm-2"></label>
                        <input type="hidden" name="id" value="{$data[$data.pk]}">
                        <input class="btn btn-primary submit" type="submit" value="保存">
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
{/block}
{block name="js"}
<script type="text/javascript" src="https://unpkg.com/qiniu-js@v2.4.0/dist/qiniu.min.js"></script>
<script type="text/javascript" src="/public/plugs/jQuery-Tags-Input/src/jquery.tagsinput.js"></script>
<script>

    $('.add').click(function () {

        var str = '<div style="margin-top: 15px;">\n' +
            '                                                <input type="hidden" name="form_id[]" value="">\n' +
            '                                                <input style="float: left" placeholder="邀约形式" class="form-control" name="form_name[]" type="text" value="">\n' +
            '                                                <input  style="margin-left: 5px" type="button" class="btn delStr" value="删除">\n' +
            '                                            </div>\n' +
            '                                            <div style="clear: both"></div>';
        $("#form").append(str);


    });

    $('.tag').click(function () {

        var str = '<div style="margin-top: 15px;">\n' +
            '                                                <input type="hidden" name="tag[]" value="">\n' +
            '                                                <input style="float: left" placeholder="标签名" class="form-control" name="tag_name[]" type="text" value="">\n' +
            '                                                <input  style="margin-left: 5px" type="button" class="btn delStr" value="删除">\n' +
            '                                            </div>\n' +
            '                                            <div style="clear: both"></div>';
        $("#tag").append(str);


    });

    //浮动层删除
    $(document).on("click",".delStr",function() {

        $(this).parent('div').remove();

    });






    // function delStr(_this) {
    //
    //     $(_this).parent('div').remove();
    //
    // }

    $('.qiniu').click(function () {
        var file = $('#file')[0].files[0];
        if (!file){
            layer.msg('您未选择文件', {icon: 5, time: 2000});return false;
        }
        var btn = $(this);
        btn.attr('disabled', 'disabled');
        layer.msg('上传中', {
            icon: 16
            ,shade: [0.3,'#999999'],
            time:21600000
        });
        var token = "{$token}";
        var index = file.name.lastIndexOf(".");
        var ext = file.name.substring(index);
        var key = takeName('vod',2)+ext;
        var config = {
            useCdnDomain: true,
            region: qiniu.region.z0,
            concurrentRequestLimit:3,
        };
        var putExtra = {
            fname: file.name,
            params: {},
            mimeType:  null
        };
        var observer = {
            next(res){
                $('.layui-layer-padding').html('<i class="layui-layer-ico layui-layer-ico16"></i>上传中 '+res.total.percent.toFixed(2)+'%');
            },
            error(err){
                layer.msg('上传失败,请稍后重试'+err.message, {icon: 5, time: 2000});
                layer.closeAll("loading");
                btn.attr('disabled', false);
            },
            complete(res){
                var domain = "{$domain}";
                var url = domain+res.key;
                $('.play_url').attr("src",url);
                $('.del').attr('data-url',url);
                $("input[name='video']").val(url);
                layer.msg('上传成功', {icon: 1, time: 2000});
                layer.closeAll("loading");
                btn.attr('disabled', false);
                removeFile('file');
            }
        };
        var observable = qiniu.upload(file, key, token, putExtra, config)
        var subscription = observable.subscribe(observer)

    });




    $('.del').click(function () {
        var btn = $(this);
        btn.attr('disabled', 'disabled');
        var load=layer.load(1, {
            shade: [0.3,'#999999'] //0.1透明度的白色背景
        });
        var url = $(this).data('url');
        $.get("{:url('/upload/delete1')}"+'?file='+url, function(result){
            if (result.code == 1){
                layer.msg('删除成功', {icon: 1, time: 2000});
                layer.closeAll("loading");
                btn.attr('disabled', false);
                $('.playUrl').attr("src",'');
                $('.del').attr('data-url','');
                $("input[name='video']").val('');
            } else{
                layer.msg('删除失败,请稍后重试', {icon: 5, time: 2000});
                layer.closeAll("loading");
                btn.attr('disabled', false);
            }
        });

    })

    $(function () {

        $('.tags').tagsInput({defaultText:'',width:'350'});


        var type   = "{$data.type}";
        if(type != ''){
            $('#type'+type).attr('selected',true)
        }


        var is_fast   = "{$data.is_fast}";
        if(is_fast != ''){
            $('#is_fast'+is_fast).attr('selected',true)
        }


        var status   = "{$data.status}";
        if(status != ''){
            $('#status'+status).attr('selected',true)
        }
    })

</script>



{/block}